/**
 * Created by Delicate on 2018/1/8.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    ScrollView,

} from 'react-native';

import {
    FormStatus,
    FormEvent,
    SubmitBtn,
    DefaultField,
    DefaultInput,
    DefaultLabel
} from '../../components/Form'
import NavBar from '../../components/NavBarView'
import ManagerService from '../../services/Manager'

let _self;

let validRule = {};

class Views extends React.Component {

    constructor(props) {
        super(props)
        _self = this;
        this.state = {
            formStatus: FormStatus.EDIT,
            form: {
                the_applicant: '',
                the_applicant_job: '',
                the_applicant_mobile: '',
                email: '',
                qq_number: '',
                chat_number: '',
            },
            readOnly: false
        };
        const params = this.props.navigation.state.params;
        this.state.readOnly = params.readOnly;
        this.state.form = {
            ...this.state.form,
            ...params.detail
        };
        validRule = {...params.validRule};
    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    //input改变触发
    inputChange(key, value) {
        let form = _self.state.form;
        form[key] = value;
        _self.setState({form}, () => {
            setTimeout(() => {
                _self.setState({
                    formStatus: FormEvent.isCompleted(validRule, _self.state.form)
                })
            }, 200);
        });
    }

    async submit() {
        const {result, message} = FormEvent.isValid(validRule, _self.state.form);
        if(result){
            const {result, message} = await ManagerService.contactSubmit({params: _self.state.form});
            if(result) {
                Toast.show("提交成功");
                _self.props.navigation.state.params.refresh();
                setTimeout(()=>{
                    _self.props.navigation.goBack();
                },400);
            }else {
                Toast.show(message);
            }
        }else{
            Toast.show(message);
        }
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <NavBar
                    host={this}
                    title="企业对接人信息"/>
                <ScrollView style={styles.container}>
                    <DefaultField text="姓名">
                        {
                            this.state.readOnly ?
                                <DefaultLabel inputValue={this.state.form.the_applicant}/> :
                                <DefaultInput
                                    onChangeText={(text) => this.inputChange('the_applicant', text)}
                                    maxLength={50}
                                    inputValue={this.state.form.the_applicant}
                                    placeholder="请输入对接人姓名"
                                    control={this.state.formStatus}/>
                        }

                    </DefaultField>
                    <DefaultField text="公司职位">
                        {
                            this.state.readOnly ?
                                <DefaultLabel inputValue={this.state.form.the_applicant_job}/> :
                                <DefaultInput
                                    onChangeText={(text) => this.inputChange('the_applicant_job', text)}
                                    maxLength={50}
                                    inputValue={this.state.form.the_applicant_job}
                                    placeholder="请输入您所在公司的职位"
                                    control={this.state.formStatus}/>
                        }
                    </DefaultField>
                    <DefaultField text="手机号">
                        {
                            this.state.readOnly ?
                                <DefaultLabel inputValue={this.state.form.the_applicant_mobile}/> :
                                <DefaultInput
                                    onChangeText={(text) => this.inputChange('the_applicant_mobile', text)}
                                    maxLength={11}
                                    inputValue={this.state.form.the_applicant_mobile}
                                    placeholder="请输入手机号码"
                                    control={this.state.formStatus}/>
                        }
                    </DefaultField>
                    <DefaultField text="邮箱地址">
                        {
                            this.state.readOnly ?
                                <DefaultLabel inputValue={this.state.form.email}/> :
                                <DefaultInput
                                    onChangeText={(text) => this.inputChange('email', text)}
                                    maxLength={50}
                                    inputValue={this.state.form.email}
                                    placeholder="请输入邮箱地址"
                                    control={this.state.formStatus}/>
                        }
                    </DefaultField>
                    <DefaultField text="QQ">
                        {
                            this.state.readOnly ?
                                <DefaultLabel inputValue={this.state.form.qq_number}/> :
                                <DefaultInput
                                    onChangeText={(text) => this.inputChange('qq_number', text)}
                                    maxLength={50}
                                    inputValue={this.state.form.qq_number}
                                    placeholder="请输入QQ号码(非必填)"
                                    control={this.state.formStatus}/>
                        }
                    </DefaultField>
                    <DefaultField text="微信">
                        {
                            this.state.readOnly ?
                                <DefaultLabel inputValue={this.state.form.chat_number}/> :
                                <DefaultInput
                                    onChangeText={(text) => this.inputChange('chat_number', text)}
                                    maxLength={50}
                                    inputValue={this.state.form.chat_number}
                                    placeholder="请输入微信号码(非必填)"
                                    control={this.state.formStatus}/>
                        }
                    </DefaultField>
                </ScrollView>
                {
                    this.state.readOnly ?
                        <View/> :
                        <View style={styles.btnBox}>
                            <SubmitBtn
                                style={styles.btn}
                                onPress={() => this.submit()}
                                control={this.state.formStatus}
                                text="保存"/>
                        </View>
                }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff'
    },
    btnBox: {
        paddingHorizontal: layout.GAP_HORIZONTAL_SMALL,
        paddingVertical: layout.GAP_VERTICAL_SMALL,
        backgroundColor: '#fff'
    },
    btn: {
        marginTop: 0,
        height: layout.height(90)
    }
})

//路由
const AuthProForm = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'AuthProForm',
    sign: true
};

export default AuthProForm;